<template>
    <div class="signature-board">
        <div class="center" style="width: 100%; height: 100%" @click="openDialog">
            <!--:style="{background:`url(${base64}) center / contain no-repeat`}"-->
            <template v-if="!imgId">
                <i class="el-icon-edit-outline" style="color: #cfcfcf" />
                <div>点此签名</div>
            </template>
            <template v-else>
                <img
                    :class="__isMobile__ ? 'signature-preview-mobile' : 'signature-preview-pc'"
                    :src="previewUrl + imgId"
                />
            </template>
        </div>
        <el-dialog
            v-if="dialogVisible"
            title="填写签名"
            :fullscreen="__isMobile__"
            destroy-on-close
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :class="__isMobile__ ? 'mobile' : 'pc'"
            :width="__isMobile__ ? '100%' : '50%'"
        >
            <signature
                :__dpr__="__dpr__"
                :__vModel__="__vModel__"
                :isMobile="__isMobile__"
                @confirm="confirm"
                @cancel-signature="dialogVisible = false"
            />
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
import url from '@/common/url-config'
import { getFileToken } from '@/common/api/common'
const { fileBaseUrl, imgPreviewUrl } = url
let me
export default {
    name: 'SignatureBoard',
    props: ['__dpr__', '__isMobile__', '__config__', '__preview__', '__vModel__'],
    data() {
        return {
            previewUrl: fileBaseUrl + imgPreviewUrl,
            dialogVisible: false,
            base64: '',
            fileToken: '',
            type: 'signature',
            imgId: '',
        }
    },
    computed: {
        disabled() {
            return this.$attrs.disabled
        },
    },
    mounted() {
        me = this
        let val = this.$vnode.data.props.value
        if (val) {
            this.imgId = val
        }
    },
    methods: {
        uploadFileServer() {
            let token = this.fileToken
            let base64 = this.base64
            let formData = new FormData()
            formData.append('base64file', base64)
            formData.append('fileName', new Date().getTime())

            axios({
                method: 'post',
                url: '/file/api/Upload/v1/SingleBase64',
                headers: {
                    'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarypwaUnvNcMvGIHUBK',
                    token,
                },
                data: formData,
            })
                .then(res => {
                    if (res.data.code == 200) {
                        this.imgId = res.data.data.id
                        this.$emit('input', this.imgId)
                    }
                })
                .catch(e => {
                    alert(JSON.stringify(e))
                })
                .finally(() => {})
        },
        handleClose() {
            this.dialogVisible = false
        },
        openDialog() {
            if (this.disabled) return
            this.__preview__ && (this.dialogVisible = true)
        },
        async confirm(base64) {
            this.base64 = base64
            this.dialogVisible = false

            try {
                let res = await getFileToken()
                this.fileToken = res?.data?.token
                this.uploadFileServer()
            } catch (e) {
                console.log(e)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.signature-board {
    height: 100px;
    width: 100%;
    font-size: 16px;
    background: #f6f8f9;
    color: #666;
    .signature-preview-mobile {
        transform: rotate(-90deg);
        height: 200%;
    }
    .signature-preview-pc {
        max-width: 100%;
        max-height: 100%;
    }
}
</style>
